Robusztus erőforrás-betöltés Reactben: Az Error Boundary-k mesteri használata Hookokkal

A modern webalkalmazásokban az erőforrások aszinkron betöltése bevett gyakorlat. Legyen szó API-ból történő adatlekérésről, képek betöltéséről vagy modulok importálásáról, a betöltés során fellépő potenciális hibák kezelése kulcsfontosságú a zökkenőmentes felhasználói élmény szempontjából. A React Error Boundary-k mechanizmust biztosítanak a JavaScript-hibák elkapására a gyermekkomponens-fájuk bármely pontján, ezen hibák naplózására, és egy tartalék felhasználói felület (fallback UI) megjelenítésére az egész alkalmazás összeomlása helyett. Ez a cikk azt vizsgálja, hogyan használhatjuk hatékonyan az Error Boundary-kat a React Hookokkal együtt az erőforrás-betöltési hibák kezelésére.

Az Error Boundary-k megértése

A React 16 előtt a komponensek renderelése során kezeletlen JavaScript-hibák megrongálták a React belső állapotát, és rejtélyes hibákat okoztak a későbbi renderelések során. Az Error Boundary-k ezt úgy oldják meg, hogy egyfajta mindent elkapó blokként működnek a gyermekkomponenseikben előforduló hibák számára. Ezek olyan React komponensek, amelyek az alábbi életciklus-metódusok egyikét vagy mindkettőt implementálják:

• static getDerivedStateFromError(error): Ez a statikus metódus akkor hívódik meg, miután egy leszármazott komponens hibát dobott. Argumentumként megkapja a dobott hibát, és egy értékkel tér vissza a komponens állapotának frissítéséhez.
• componentDidCatch(error, info): Ez az életciklus-metódus akkor hívódik meg, miután egy leszármazott komponens hibát dobott. Argumentumként megkapja a dobott hibát, valamint egy objektumot, amely információt tartalmaz arról, hogy melyik komponens dobta a hibát. Használhatja a hibainformációk naplózására.

Fontos, hogy az Error Boundary-k csak a renderelési fázisban, az életciklus-metódusokban és a teljes alattuk lévő fa konstruktoraiban keletkező hibákat kapják el. Nem kapják el a hibákat a következők esetében:

• Eseménykezelők (tudjon meg többet az alábbi szakaszban)
• Aszinkron kód (pl. setTimeout vagy requestAnimationFrame visszahívások)
• Szerveroldali renderelés
• Magában az Error Boundary komponensben dobott hibák (a gyermekei helyett)

Error Boundary-k és React Hookok: Egy erőteljes kombináció

Míg hagyományosan osztálykomponenseket használtak az Error Boundary-k implementálására, a React Hookok egy tömörebb és funkcionálisabb megközelítést kínálnak. Létrehozhatunk egy újrafelhasználható useErrorBoundary hookot, amely magába foglalja a hibakezelési logikát, és kényelmes módot biztosít azon komponensek becsomagolására, amelyek hibát dobhatnak az erőforrás-betöltés során.

Egyéni useErrorBoundary Hook létrehozása

Itt egy példa egy useErrorBoundary hookra:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

Magyarázat:

• useState: A useState-et használjuk a hibaállapot kezelésére. Kezdetben a hibát null-ra állítja.
• useCallback: A useCallback-et a resetError és captureError függvények memoizálására használjuk. Ez jó gyakorlat a felesleges újrarenderelések elkerülésére, ha ezeket a függvényeket propként adjuk tovább.
• ErrorBoundary Komponens: Ez egy useCallback-kel létrehozott funkcionális komponens, amely children és egy opcionális fallback propot kap. Ha hiba van az állapotban, akkor vagy a megadott fallback komponenst, vagy egy alapértelmezett hibaüzenetet renderel. Egyébként a gyermekeket rendereli. Ez működik Error Boundary-ként. A `[error]` függőségi tömb biztosítja, hogy újrarenderelődjön, amikor a `error` állapot megváltozik.
• captureError Függvény: Ezt a függvényt a hibaállapot beállítására használjuk. Ezt egy try...catch blokkon belül fogja meghívni az erőforrások betöltésekor.
• resetError Függvény: Ez a függvény törli a hibaállapotot, lehetővé téve a komponens számára, hogy újrarenderelje a gyermekeit (potenciálisan újra megkísérelve az erőforrás betöltését).

Erőforrás-betöltés implementálása hibakezeléssel

Most nézzük meg, hogyan használhatjuk ezt a hookot az erőforrás-betöltési hibák kezelésére. Vegyünk egy komponenst, amely felhasználói adatokat kér le egy API-ból:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data. Retry